<template>
    <div>
        <show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"
                        @selectView="selectView"></show-view-path>
        <div style="height: 100%" :ref="config.key" :key="config.key"></div>
    </div>
</template>

<script>
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';

/**
 * 仪表盘
 */
export default {
    name: "gaugeChart-view",
    mixins: [ChartPublic, ChartStyle],
    data() {
        return {
            chartType: "gauge"
        }
    },
    methods: {
        setOption() {
            let data = [];
            //静态数据模式
            if (this.config.dataSources.source == "static") {
                if (this.config.dataSources.staticData) {
                    //静态数据
                    data = JSON.parse(this.config.dataSources.staticData);
                }
            } else {
                for (let i = 0; i < this.config.dataSources.measures.length; i++) {
                    let measure = this.config.dataSources.measures[i];
                    let key = measure.tableName ? measure.tableName + "_" + measure.fieldName : measure.fieldName;
                    let obj = {
                        name: measure.fieldLabel
                    }
                    for (let j = 0; j < this.data.length; j++) {
                        if (!obj.value) {
                            obj.value = this.data[j][key];
                        } else {
                            obj.value += this.data[j][key];
                        }
                    }
                    if (this.config.dataSources.measures.length > 1) {
                        let val = 0;
                        //配置长度为偶数时
                        if (this.config.dataSources.measures.length % 2 == 0) {
                            //取一半作为标记
                            let num = this.config.dataSources.measures.length / 2;
                            if (i < num) {
                                val = "-" + (50 / num) * (i + 1);
                            } else {
                                val = (50 / num) * (i + 1 - num);
                            }
                        } else {
                            let num = Math.floor(this.config.dataSources.measures.length / 2);
                            if (i < num) {
                                val = "-" + (50 / num) * (i + 1);
                            } else if (i == num) {
                                val = "0";
                            } else {
                                val = (50 / num) * (i - 1);
                            }
                        }
                        obj.title = {
                            offsetCenter: [val + '%', '80%']
                        };
                        obj.detail = {
                            offsetCenter: [val + '%', '95%']
                        };
                    }
                    data.push(obj);
                }
            }
            let series = {
                type: 'gauge',
                axisLabel: {
                    color: 'auto',
                    distance: 40,
                    fontSize: 20
                },
                detail: {
                    valueAnimation: true,
                    show: this.config.styles.gaugeConfig.showData,
                    fontSize: this.config.styles.gaugeConfig.dataFontSize,
                    color: this.config.styles.gaugeConfig.dataColor
                },
                data: data
            }
            if (this.config.styles.gaugeConfig.dataSeat) {
                let dataSeat = this.config.styles.gaugeConfig.dataSeat.split(',');
                series.detail.offsetCenter = dataSeat;
            }

            if (this.config.styles.gaugeConfig.dataFormatter && this.config.styles.gaugeConfig.dataFormatter.replace(/\s*/g, "")) {
                if (this.config.styles.gaugeConfig.dataFormatterMode == "template") {
                    series.detail.formatter = this.config.styles.gaugeConfig.dataFormatter;
                } else {
                    //格式化
                    let formatter = this.config.styles.gaugeConfig.dataFormatter.replace(/\\n/g, "\n").replace(/\\t/g, "\t");
                    series.detail.formatter = new Function("value", "index", formatter);
                }
            }
            //仪表盘半径
            if (this.config.styles.gaugeConfig.radiusSuffix == 'px') {
                series['radius'] = this.config.styles.gaugeConfig.radius
            } else {
                series['radius'] = this.config.styles.gaugeConfig.radius + '%'
            }
            //仪表盘中心位置
            let center = this.config.styles.gaugeConfig.centreCoordinate.split(',');
            if (center && center.length == 2) {
                series['center'] = center;
            }
            if (this.config.styles.gaugeConfig) {
                //设置开始角度和结束角度
                series['startAngle'] = this.config.styles.gaugeConfig.startAngle;//开始角度
                series['endAngle'] = this.config.styles.gaugeConfig.endAngle;//结束角度
                //最小刻度，最大刻度
                series['min'] = this.config.styles.gaugeConfig.minScale;//最小刻度
                series['max'] = this.config.styles.gaugeConfig.maxScale;//最大刻度
                //仪表盘坐标轴线配置
                let axisLine = {
                    show: this.config.styles.gaugeConfig.showAxis,
                    roundCap: this.config.styles.gaugeConfig.axisRound,
                    lineStyle: {
                        width: this.config.styles.gaugeConfig.axisWidth,
                        color: [[1, this.config.styles.gaugeConfig.axisColor]],
                    },
                }
                series['axisLine'] = axisLine
                //进度条
                let progress = {
                    show: this.config.styles.gaugeConfig.showProgress,
                    width: this.config.styles.gaugeConfig.progressWidth,
                    roundCap: this.config.styles.gaugeConfig.progressRound,
                    itemStyle: {
                        color: this.config.styles.gaugeConfig.progressColor
                    }
                }
                series['progress'] = progress
                //分割线
                let splitLine = {
                    show: this.config.styles.gaugeConfig.showSplitLine,
                    length: this.config.styles.gaugeConfig.splitLineWidth,
                    distance: Number(this.config.styles.gaugeConfig.lineDistance),
                    lineStyle: {
                        width: this.config.styles.gaugeConfig.lineWidth,
                        color: this.config.styles.gaugeConfig.lineColor,
                    }
                }
                series['splitLine'] = splitLine
                //刻度线
                let axisTick = {
                    show: this.config.styles.gaugeConfig.showTickMark,
                    length: this.config.styles.gaugeConfig.splitTickWidth,
                    distance: Number(this.config.styles.gaugeConfig.tickDistance),
                    //刻度分割段数
                    splitNumber: this.config.styles.gaugeConfig.segmentsNum,
                    lineStyle: {
                        width: this.config.styles.gaugeConfig.tickWidth,
                        color: this.config.styles.gaugeConfig.tickColor
                    }
                }
                series['axisTick'] = axisTick;
                //刻度标签
                let axisLabel = {
                    show: this.config.styles.gaugeConfig.showTickLabel,
                    color: this.config.styles.gaugeConfig.tickLabelFontColor,
                    fontSize: this.config.styles.gaugeConfig.tickLabelFontFontSize,
                    distance: Number(this.config.styles.gaugeConfig.tickLabelFontSize),
                }
                if (this.config.styles.gaugeConfig.formatter && this.config.styles.gaugeConfig.formatter.replace(/\s*/g, "")) {
                    if (this.config.styles.gaugeConfig.formatterMode == "template") {
                        axisLabel.formatter = this.config.styles.gaugeConfig.formatter;
                    } else {
                        //格式化
                        let formatter = this.config.styles.gaugeConfig.formatter.replace(/\\n/g, "\n").replace(/\\t/g, "\t");
                        axisLabel.formatter = new Function("value", "index", formatter);
                    }
                }
                series['axisLabel'] = axisLabel
                //仪表盘标题
                let title = {
                    show: this.config.styles.gaugeConfig.showTitle,
                    color: this.config.styles.gaugeConfig.titleColor,
                    fontSize: this.config.styles.gaugeConfig.titleFontSize
                }
                let offsetCenter = this.config.styles.gaugeConfig.titleSeat.split(',');
                if (offsetCenter && offsetCenter.length == 2) {
                    title['offsetCenter'] = offsetCenter;
                }
                series['title'] = title
                //仪表盘指针
                let pointer = {
                    show: this.config.styles.gaugeConfig.showHand,
                    length: this.config.styles.gaugeConfig.handLength,
                    width: this.config.styles.gaugeConfig.handWidth,
                    itemStyle: {
                        color: this.config.styles.gaugeConfig.handColor
                    }
                }
                series['pointer'] = pointer;
                //指针固定点
                let anchor = {
                    show: this.config.styles.gaugeConfig.showFixedPoint,
                    showAbove: this.config.styles.gaugeConfig.onPointer,
                    size: this.config.styles.gaugeConfig.fixedPointSize,
                    itemStyle: {
                        color: this.config.styles.gaugeConfig.fixedPointColor,
                        borderColor: this.config.styles.gaugeConfig.fixedLineColor,
                        borderWidth: this.config.styles.gaugeConfig.fixedLineWidth
                    }
                }
                series['anchor'] = anchor
                series['splitNumber'] = this.config.styles.gaugeConfig.splitNumber
            }
            this.option = {
                progress: {
                    show: true
                },
                toolbox: this.chartToolbox(),//工具栏目配置
                series: [series]
            };
        }
    },
}
</script>

<style scoped>
</style>
